import React, { useState, useEffect, FC } from 'react';
import { Line } from '@ant-design/charts';
import useHoxModel from '../../../../useHoxModel';
import styles from './index.less';
import { Space, Spin } from 'antd';
import classnames from 'classnames';
import EmptyCenter from '@/components/EmptyCenter';

interface Props {
  height: number;
}
const DemoLine: FC<Props> = ({ height }) => {
  const {
    getHisAlarmChart,
    hisAlarmChart = [],
    hisAlarmChartLoading = false,
  } = useHoxModel((model) => [model.hisAlarmChartLoading, model.hisAlarmChart]);

  useEffect(() => {
    getHisAlarmChart({ type: 'month' });
  }, []);
  const config = {
    title: {
      visible: true,
      text: '告警曲线统计',
      style: {
        fontSize: 14,
        fill: '#545b6d',
        fontWeight: 500,
      },
    },
    tooltip: {
      visible: true,
      formatter: (xField: string, yField: number, seriesField: string) => {
        return { name: '告警量', value: yField };
      },
    },
    xAxis: {
      line: {
        visible: true,
        style: {
          stroke: '#eee',
        },
      },
    },
    yAxis: {
      grid: {
        visible: true,
        line: {
          style: {
            stroke: '#eee',
            lineDash: [4, 4],
          },
        },
      },
      tickInterval: 1,
    },
    padding: [30, 35, 45, 55],
    forceFit: true,
    data: hisAlarmChart,
    xField: 'time',
    yField: 'value',
    smooth: true,
    style: { height: height - 16 + 'px' },
  };
  return (
    <div className={styles['line-wrap']}>
      <Spin spinning={hisAlarmChartLoading}>
        {hisAlarmChart[0] ? <Line {...config} /> : <EmptyCenter />}
      </Spin>
      <DateSwitch getHisAlarmChart={getHisAlarmChart} />
    </div>
  );
};
interface DateSwitchProps {
  getHisAlarmChart: (
    params?:
      | {
          type: string;
        }
      | undefined,
  ) => Promise<any>;
}
const DateSwitch: FC<DateSwitchProps> = ({ getHisAlarmChart }) => {
  const [date, setDate] = useState('month');
  const dates = [
    {
      name: '当日',
      value: 'day',
    },
    { name: '本周', value: 'week' },
    { name: '本月', value: 'month' },
  ];
  return (
    <div className={styles['date-wrap']}>
      <Space size={30}>
        {dates.map((item: { name: string; value: string }, index: number) => {
          return (
            <span
              key={index.toString(36) + index}
              className={classnames(date === item.value ? styles['active'] : null, styles['date'])}
              onClick={() => {
                setDate(item.value);
                getHisAlarmChart({ type: item.value });
              }}
            >
              {item.name}
            </span>
          );
        })}
      </Space>
    </div>
  );
};

export default DemoLine;
